<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>浮动的基本概念</title>

        <style>
            /* 浮动的最本质功能：用来实现并排
               浮动使用要点：要浮动，并排的盒子都要设置浮动
               父盒子要有足够的宽度，否则子盒子会掉下去
            */

            .box {
                width: 600px;
                height: 200px;
                border: 1px solid #000;
                margin-bottom: 50px;
            }

            .box .c1 {
                width: 200px;
                height: 200px;
                background-color: orange;
                /* float:right;即可设置右浮动 */
                float: right;
                /* float:left; */
            }
            .box .c2 {
                width: 200px;
                height: 200px;
                background-color: blue;
                float: right;
                /* float:left; */
            }
            .box .c3 {
                width: 200px;
                height: 200px;
                background-color: green;
                float: right;
                /* float:left; */
            }
        </style>
    </head>
    <body>
        <div class="box">
            <div class="c1">1</div>
            <div class="c2">2</div>
            <div class="c3">3</div>
        </div>
    </body>
</html>